<template>
  <div class="dynamic">
    <div class="dynamicLeft">
      <div class="card" v-for="(dynamicNews, index) in dynamic.cards" :key="index">
        <!-- up图片 -->
        <div class="image">
          <img
            class="img"
            :src="
              dynamicNews.card.user?.face
                ? dynamicNews.card.user?.face
                : dynamicNews.card.owner?.face
            "
          />
        </div>
        <!-- 主要内容 -->
        <div class="mainContent">
          <div class="userName">{{
            dynamicNews.card.user?.uname
              ? dynamicNews.card.user?.uname
              : dynamicNews.card.owner?.name
          }}</div>
          <div class="time">
            {{ dynamicNews.card?.item?.timestamp? moment(dynamicNews.card?.item?.timestamp! * 1000).format('MM-DD'): moment(dynamicNews.card.pubdate! * 1000).format('MM-DD') }}
          </div>
          <div class="cardContent">
            <div class="postContent">
              <div class="originalCardContent">
                <div class="description">
                  <!-- 主要文本内容  -->
                  <div class="content">
                    <!-- <div class="ellipsis">
                      经典美剧【老友记全十季高清视频】，非常非常珍贵的资料，<br />
                      仅限今天免费领取，明天这时候删除~<br />
                      <br />
                      <br />
                      2.领取方式：在【图2】的后台，回复【老友记】，即可免费领取。
                      <br />
                      "..."
                    </div> -->
                    <div class="hidden contentFull">
                      {{ dynamicNews.card.item?.content }}
                    </div>
                  </div>
                  <div class="btns">
                    <div class="expandBtn">收起/展开</div>
                  </div>
                </div>
                <!-- 图片框 -->
                <div class="imgsbox"> </div>
              </div>
            </div>
          </div>
          <!-- 底部三个按钮 -->
          <div class="buttonBar">
            <div class="singleBtn">
              <span class="textBar">
                <i class="iconfont icon-31zhuanfa">
                  &nbsp;&nbsp;{{ localNum(dynamicNews.desc.repost, 1) }}
                </i>
              </span>
            </div>
            <div class="singleBtn">
              <i class="iconfont icon-pinglun">&nbsp;&nbsp;评论</i>
            </div>
            <div class="singleBtn">
              <i class="iconfont icon-dianzan">
                &nbsp;&nbsp;{{ localNum(dynamicNews.desc.like, 1) }}
              </i>
            </div>
          </div>
        </div>
        <!-- 右侧按钮 -->
        <div class="buttonArea">
          <div class="iconfont icon-gengduozhanshi"></div>
        </div>
        <!-- 点击右侧按钮后,出现子按钮 -->
        <div class="morePanel">
          <p class="childBtn">置顶</p>
          <p class="childBtn">删除</p>
        </div>
      </div>
    </div>
    <div class="dynamicRight">
      <div class="section">
        <!-- 个人资料 -->
        <PersonalData />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, reactive, onUnmounted } from 'vue'
  import { useRoute } from 'vue-router'

  export default defineComponent({
    name: 'Dynamic',
  })
</script>

<script lang="ts" setup>
  import PersonalData from '@/components/PersonalData/index.vue'
  import { Dynamic, reqDynamic } from '@/api/personal'
  import moment from 'moment'
  import { localNum, throttle } from '@/utils/lib'

  const route = useRoute()

  const hostMid = Number(route.query.hostMid)

  const dynamic = reactive<Partial<Dynamic>>({
    //定义数据初始值
    cards: [],
    has_more: 1,
    next_offset: 0,
  })

  const isSending = ref(false) //判断是否触发请求
  async function getDynamic(host_uid: number, offset_dynamic_id: number) {
    //把card中的json数据格式化，模拟数据结构 每一次发请求把card push进去
    //判断has_more是否有值，有就发请求，更新has_more和next_offset
    isSending.value = true
    //把请求回来的数据解构并赋值给定义的数据
    const { cards, has_more, next_offset } = await reqDynamic(host_uid, offset_dynamic_id)
    //处理请求card回来的数据是json字符串，先断言成un know，再断言中string，在通过json.parse处理成对象再赋值
    cards.forEach((item) => {
      item.card = JSON.parse(item.card as unknown as string)
    })
    //把card 每一项push进去，不会覆盖
    dynamic.cards?.push(...cards)
    dynamic.has_more = has_more
    dynamic.next_offset = next_offset

    isSending.value = false
    // console.log(dynamic, '00')
  }

  onMounted(async () => {
    getDynamic(hostMid, 0)
  })
  //屏幕滚动节流

  const th_offsetDown = throttle(
    () => {
      if (isSending.value) return
      const html = document.documentElement
      const offsetDown = html.scrollHeight - html.scrollTop - html.clientHeight
      if (offsetDown < 600) {
        // console.log(1111)
        getDynamic(hostMid, dynamic.next_offset!)
      }
    },
    400,
    true,
  )
  window.addEventListener('scroll', th_offsetDown)

  onUnmounted(() => {
    window.removeEventListener('scroll', th_offsetDown)
  })
</script>

<style lang="less" scoped>
  .dynamic {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .dynamicLeft {
      width: 830px;
      // padding: 15px 20px;
      // background-color: #fff;

      .card {
        margin-bottom: 8px;
        background-color: #fff;
        position: relative;
        top: 0;
        border-radius: 4px;
        min-width: 632px;
        color: #222;
        font-size: 14px;
        .image {
          position: absolute;
          width: 48px;
          height: 48px;
          top: 24px;
          left: 24px;
          cursor: pointer;
          border-radius: 50%;
          overflow: hidden;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .mainContent {
          width: 534px;
          padding-top: 27px;
          padding-bottom: 0px;
          margin-left: 88px;
          // background-color: brown;
          .userName {
            font-size: 16px;
            color: rgb(251, 114, 153);
            cursor: pointer;
          }
          .time {
            color: #99a2aa;
            font-size: 12px;
            cursor: pointer;
            &:hover {
              color: rgb(251, 114, 153);
            }
          }
          .cardContent {
            margin-top: 10px;
            box-sizing: border-box;
            padding-right: 0;
            .postContent {
              .originalCardContent {
                .description {
                  max-width: 100%;
                  display: inline-block;
                  margin-bottom: 10px;
                  font-size: 14px;
                  line-height: 22px;
                  word-wrap: break-word;
                  letter-spacing: 0.5px;
                  // 主要内容
                  .content {
                    padding-right: 10px;
                    // .ellipsis {
                    //   // overflow: hidden;
                    //   text-overflow: ellipsis;
                    //   word-break: break-word;
                    //   word-wrap: break-word;
                    // }
                    .contentFull {
                      //全部内容是否需要隐藏
                      // display: none;
                      // height: 0;
                      width: 100%;
                      word-break: break-word;
                      word-wrap: break-word;
                    }
                  }
                  //展开和收起
                  .btns {
                    .expandBtn {
                      display: inline-block;
                      color: #178bcf;
                      cursor: pointer;
                      line-height: 22px;
                    }
                  }
                }
                //图片框
              }
            }
          }
          // 底部三个按钮
          .buttonBar {
            width: 100%;
            color: #99a2aa;
            .singleBtn {
              display: inline-block;
              line-height: 48px;
              width: 92px;
              cursor: pointer;
              &:hover {
                color: #00a1d6;
              }
              .iconfont {
                font-size: 12px;
              }
            }
          }
        }
        // 右侧按钮
        .buttonArea {
          position: absolute;
          top: 28px;
          right: 16px;
          user-select: none;
          cursor: pointer;
          .icon-diandiandianshu {
            font-size: 30px;
            color: #ccd0d7;
            &:hover {
              color: #00a1d6;
            }
          }
        }
        // 右侧子按钮
        .morePanel {
          //动态显示隐藏
          display: none;
          position: absolute;
          width: 94px;
          text-align: center;
          top: 63px;
          right: 5px;
          background-color: #fff;
          border: 1px solid #e5e9ef;
          border-radius: 8px;
          z-index: 10;
          box-shadow: 0 11px 12px 0 rgb(106 115 133 / 12%);
          .childBtn {
            cursor: pointer;
            &:first-child {
              padding-top: 18px;
              padding-bottom: 4px;
            }
            &:last-child {
              padding-bottom: 18px;
              padding-top: 4px;
            }
          }
        }
      }
    }
    .dynamicRight {
      float: right;
      width: 350px;
      margin-left: 20px;

      .section {
        background-color: #fff;
        // border: 1px solid #eee;
        border-radius: 4px;
        padding: 15px 20px 18px;
        margin-bottom: 10px;
      }
    }
  }
</style>
